.el-header {
  height: $nav_bar_height !important;
  background: linear-gradient(to left, #1795d0, #1f9eff);
  color: #fff;
  position: relative;
  border-radius: 0;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
  z-index: 99;
  padding-left: 0;
  padding-right: 0;
  .nav-header {
    height: $nav_bar_height;
    display: flex;
    align-content: center;
    justify-content: center;
    box-sizing: border-box;
    margin-left: 0 !important;
    margin-right: 0 !important;
    .left,
    .right {
      height: $nav_bar_height;
      display: flex;
      align-items: center;
    }
    .left {
      text-align: left;
      box-sizing: border-box;
      h3 {
        font-size: 16px;
        text-align: center;
        // padding: 0 15px;
        margin: 0;
        width: $left_menu_width;
        // background: $menuBg;
        height: $nav_bar_height;
        line-height: $nav_bar_height;
      }
      .nav-toggle-bar {
        padding: 0 15px;
        height: $nav_bar_height;
        line-height: $nav_bar_height;
        background: #24b5f0;
        .toggle-icon {
          font-size: 16px;
          position: relative;
          top: 3px;
          // left: 15px;
          cursor: pointer;
          &:hover {
            opacity: 0.8;
          }
        }
      }
    }
    .right {
      padding: 0 20px;
      float: right;
      font-size: 14px;
      .nav-menus {
        list-style: none;
        text-align: right;
        float: right;
        margin: 0;
        padding: 0;
        li {
          box-sizing: border-box;
          padding-left: 20px;
          float: left;
          cursor: pointer;
          i {
            font-size: 16px;
          }
          span {
            margin-left: 5px;
          }
        }
      }
    }
  }
}
